<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>枫叶商城——Maple Leaf Store</title>
    <link rel="stylesheet" href="../css/index.css" />
    <link rel="shortcut icon" href="../images/logo.ico" />
    <link rel="stylesheet" href="../plugin/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/order.css" />
    <link rel="stylesheet" href="../iconfont/iconfont.css" />
    <script src="../plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugin/jQuery/jquery-3.6.0.js"></script>
    <script src="../js/index.js"></script>
    <script src="../plugin/axios.min.js"></script>
  </head>

  <body>
    <!-- 顶栏 -->
    <header>
      <div id="header" class="row w">
        <!-- logo图 -->
        <div class="header_logo col-1">
          <a href="../index.html"
            ><img src="../images/logo_maple2.png" alt="..."
          /></a>

          <div class="header_logo_text">Maple Leaf</div>
        </div>
        <!-- 搜索框 -->
        <div class="header_search col-8">
          <input type="text" />
          <button>搜索</button>
        </div>
        <!-- 购物车 -->
        <div class="col-3 header_shoppingCart">
          <a href="./shoppingCart.html"
            ><img src="../images/购物车_shopping.png" alt="" />
            我的购物车
          </a>
        </div>
      </div>
    </header>

    <!-- 主体部分 -->
    <main>
      <!-- 主体内容 -->
      <div class="main mx-auto w">
        <div class="order row">
          <div class="order_title m-3 d-flex align-items-center">
            <div class="input-group">
              <label for="">我的订单</label>
              <input
                type="text"
                class="form-control"
                placeholder="输入商品标题或订单号进行查询"
              />
              <button
                class="btn btn-outline-secondary"
                type="button"
                id="button-addon2"
              >
                订单查询
              </button>
            </div>
          </div>
          <div class="order_shops row m-3 p-3">
            <div class="col" id="goodsShow"><!-- 订单详细 --></div>
          </div>
        </div>
      </div>
    </main>

    <!-- 底栏 -->
    <footer class="text-center">
      <p>Copyright © 2022 深圳技师学院枫叶小组（Maple Leaf Group） 版权所有</p>
      <p>项目研发小组所在地址：深圳市龙岗区龙城街道将军帽路深圳技师学院</p>
    </footer>
  </body>
</html>
<script>
  let addGoodsList = JSON.parse(sessionStorage.getItem("addGoods2"));

  const cardList = $("#goodsShow");

  // if (localStorage.getItem("user_phone")) {
  addGoodsList.forEach((element) => {
    let template = `
      <table class="mx-auto w-100 mt-4">
        <tr class="table_title">
          <td>商品信息</td>
          <td>商品单价</td>
          <td>购买数量</td>
          <td>订单总价</td>
          <td>
            <a href=""><span class="iconfont icon-ashbin"></span></a>
          </td>
        </tr>
        <tr class="table_shops">
          <td>
            <div class="shops card m-2">
              <div class="row g-0">
                <div class="col-lg-2 align-self-center">
                  <img
                    src="../upload/${element.image}"
                    class="img-fluid rounded-start"
                    alt="..."
                  />
                </div>
                <div class="col-lg-4">
                  <div class="card-body">
                    <p class="card-title">
                      ${element.name}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </td>
          <td>￥${element.amount}</td>
          <td>×1</td>
          <td>￥${element.amount}</td>
          <td>申请开票</td>
        </tr>
      </table>
  `;
    cardList.append(template);
  });
  // }
</script>
